<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="css/mui.min.css" rel="stylesheet" />
		<link rel="stylesheet" type="text/css" href="css/demo.css"/>
		<link rel="stylesheet" type="text/css" href="css/iconfont.css"/>
		<link rel="stylesheet" type="text/css" href="css/icons-extra.css"/>
		<style type="text/css">
			.mui-bar-tab .mui-tab-item .mui-icon-extra~.mui-tab-label
			{
				font-size: 11px;
			    display: block;
			    overflow: hidden;
			    text-overflow: ellipsis;
			}
			.mui-bar-tab .mui-tab-item .mui-icon-extra {
			    top: 3px;
			    width: 24px;
			    height: 24px;
			    padding-top: 0;
			    padding-bottom: 0;
			}
			.mui-bar-tab .mui-tab-item{
				text-decoration: none;
			}
			.mui-icon-extra{
				position: relative;
			}
			#sub3 span{
				-webkit-transform: scale(1.5) translateY(-3px);
				border-radius: 50%;
				background: #2AC845;
				position: relative;
				z-index: 100;
			}
			#sub3 span:before{
				color: white;
				
			}
		</style>
	</head>
	<body>
		<script src="js/mui.min.js"></script>
		<script src="js/iconfont.js"></script>
		<script type="text/javascript">
			mui.init({
				subpages:[{
					url:"sub1.html",
					id:"sub1",
					styles:{
						top:"0px",
						bottom:"45px"
					}
				}],
				preloadPages:[{
					url:"sub2.html",
					id:"sub2",
					styles:{
						top:"0px",
						bottom:"45px"
					}
				},{
					url:"sub3.html",
					id:"sub3",
					styles:{
						top:"0px",
						bottom:"45px"
					}
				},{
					url:"sub4.html",
					id:"sub4",
					styles:{
						top:"0px",
						bottom:"45px"
					}
				},{
					url:"sub5.html",
					id:"sub5",
					styles:{
						top:"0px",
						bottom:"45px"
					}
				}]
			});
		</script>
		<nav class="mui-bar mui-bar-tab" id="nav">
		    <a class="mui-tab-item mui-active" id="sub1">
		        <span class="mui-icon mui-icon-home" ></span>
		        <span class="mui-tab-label">大厅</span>
		    </a>
		    <a class="mui-tab-item" id="sub2">
		        <span class="mui-icon mui-icon-pengyouquan" ></span>
		        <span class="mui-tab-label">朋友圈</span>
		    </a>
		    <a class="mui-tab-item" id="sub3">
		        <span class="mui-icon mui-icon-plusempty"></span>
		    </a>
		    <a class="mui-tab-item" id="sub4">
		        <span class="mui-icon-extra mui-icon-extra-peoples" ></span>
		        <span class="mui-tab-label">通讯录</span>
		    </a>
		    <a class="mui-tab-item" id="sub5">
		        <span class="mui-icon mui-icon-person" ></span>
		        <span class="mui-tab-label">我的</span>
		    </a>
		</nav>
	</body>
	<script type="text/javascript">
//		var home=document.getElementById("home");
//		var team=document.getElementById("team");
//		var wode=document.getElementById("wode");
//		home.addEventListener("tap",function(){
//			var span1=this.getElementsByTagName("span")[0];
//			span1.classList.remove("icon-home");
//			span1.classList.add("icon-home-fill");
//			
//			var span2=team.getElementsByTagName("span")[0];
//			span2.classList.remove("icon-team-fill");
//			span2.classList.add("icon-team");
//			
//			var span3=wode.getElementsByTagName("span")[0];
//			span3.classList.remove("icon-wodedamaijihuo");
//			span3.classList.add("icon-wode");
//		});
//		team.addEventListener("tap",function(){
//			var span1=home.getElementsByTagName("span")[0];
//			span1.classList.remove("icon-home-fill");
//			span1.classList.add("icon-home");
//			
//			var span2=this.getElementsByTagName("span")[0];
//			span2.classList.remove("icon-team");
//			span2.classList.add("icon-team-fill");
//			
//			var span3=wode.getElementsByTagName("span")[0];
//			span3.classList.remove("icon-wodedamaijihuo");
//			span3.classList.add("icon-wode");
//		});
//		wode.addEventListener("tap",function(){
//			var span1=home.getElementsByTagName("span")[0];
//			span1.classList.remove("icon-home-fill");
//			span1.classList.add("icon-home");
//			
//			var span2=team.getElementsByTagName("span")[0];
//			span2.classList.remove("icon-team-fill");
//			span2.classList.add("icon-team");
//			
//			var span3=this.getElementsByTagName("span")[0];
//			span3.classList.remove("icon-wode");
//			span3.classList.add("icon-wodedamaijihuo");
//		});
	var p_id="sub1";
	mui("#nav").on("tap","a",function(){
		var id=this.id;
		
			var vw=plus.webview.getWebviewById(id);
			if(id!=p_id)
			{
				plus.webview.getWebviewById(p_id).hide();
				p_id=id;
				vw.show();
			}
	});
	</script>
</html>